<template>
    <el-dialog v-model="dialogVisible" title="设置收款账户" width="500px">
        <div>
            <div class="flex items-center">
                <div class="name mg-r-20">渠道名称：</div>
                <div class="flex-1">
                    <el-select v-model="channelValue" class="m-2" style="width: 100%;" placeholder="请选择" @change="getAccountList">
                        <el-option v-for="item in channelOptions" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </div>
            </div>
            <div class="table-box mg-t-20">
                <div class="table-head flex flex-jc-sb bg-gray">
                    <div class="fc-lightgrey">收款公司名称</div>
                    <div class="fc-lightgrey">拖动调整位置</div>
                </div>
                <div class="table-content">
                    <draggable :list="list" item-key="name" class="list-group" ghost-class="ghost" :move="checkMove"
                        @start="dragging = true" @end="dragging = false">
                        <template #item="{ element }">
                            <div class="flex flex-jc-sb table-item">
                                <div>{{ element.bankName }}</div>
                                <div class="mg-r-20">=</div>
                            </div>
                        </template>
                    </draggable>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="flex flex-jc-sb">
                <div class="left fc-primary fs-24 pointer" @click="handleInit">恢复默认</div>
                <div class="right flex">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        确定
                    </el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { cloneDeep } from 'lodash'
import draggable from 'vuedraggable'
import { getChannelList } from 'api/tools/manageAccount.ts'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAccountListByChannelId, updateLimitInfo } from 'api/tools/accountLimit.ts'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    }
})

const emits = defineEmits(['update:show'])

const dialogVisible = ref(false)

const handleSubmit = () => {
    list.value.forEach((i, index) => {
        i.orderNumber = index
    })
    updateLimitInfo(list.value).then(res => {
        ElMessage.success({
            message: '保存成功'
        })
        dialogVisible.value = false
    })

}

watch(() => props.show, (newval) => {
    dialogVisible.value = newval
    if (newval) {
        channelList()
    }
})

watch(dialogVisible, (newval) => {
    emits('update:show', newval)
})

const channelValue = ref('')
const channelOptions = ref([])

const list = ref([])
let listCache = []

const dragging = ref(false)

const checkMove = (ev) => {
    console.log(111, ev)
}

const channelList = () => {
    getChannelList({
        type: 1
    }).then(res => {
        channelOptions.value = res.list
        if (channelOptions.value.length) {
            channelValue.value = channelOptions.value[0].id
            getAccountList()
        }
    })
}

const getAccountList = () => {
    getAccountListByChannelId({
        channelId: channelValue.value,
        pageSize: 9999,
    }).then(res => {
        list.value = res.list || []
        listCache = cloneDeep(res.list)
    })
}

const handleInit = () => {
    list.value = cloneDeep(listCache)
}
</script>
<style lang="scss" scoped>
.bg-gray {
    background: #fafafc;
}

.table-item {
    height: 40px;
    line-height: 40px;
    border-top: 1px solid $borderColor;
    cursor: move;
}

.table-head {
    height: 40px;
    line-height: 40px;
}
</style>